<template>
  <div class="mod-config">
    <basic-container>
      <div style="margin-bottom: 20px">
        <!-- <el-button type="primary" plain @click="addBtn">新增</el-button> -->
      </div>
      <el-table
        :data="tableData"
        v-loading="dataListLoading"
        style="width: 100%"
      >
        <el-table-column
          prop="remindNum"
          header-align="center"
          align="center"
          label="提醒次数"
        ></el-table-column>
        <el-table-column
          prop="zhouqi"
          header-align="center"
          align="center"
          label="推送周期"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间"
        >
        </el-table-column>
      
        <el-table-column
          prop="state"
          header-align="center"
          align="center"
          min-width="100"
          label="启动"
        >
          <template slot-scope="scope">
            <!-- <el-switch
              v-model="scope.row.state"
              active-color="#17499a"
              inactive-color="#999999"
              active-value="1"
              inactive-value="0"
             
            >
            </el-switch> -->
            <el-radio-group v-model="scope.row.state"  @change="stateChange(scope.row)">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">启动</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
                        size="mini"
                        type="danger"
                    @click="handleDelete(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </basic-container>
    <el-dialog :title="text" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="提醒次数" prop="remindNum">
          <el-input v-model="ruleForm.remindNum" type="number">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="推送周期" prop="zhouqi">
          <el-input v-model="ruleForm.zhouqi" type="number">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveremind,
  fetchList,
  delObj,
  updatestateChange,
} from "@/api/remindSet/set";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      dataListLoading: false,
      text: "",
      rules: {},
      ruleForm: {},
    };
  },
  created() {
    this.getList();
  },
  watch: {},
  methods: {
    getList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.ruleForm
        )
      ).then((response) => {
        this.tableData = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
      
    },
    stateChange(row) {
      var params = {
        id: row.id,
        state: row.state,
      };
      console.log(row.state);
      updatestateChange(params).then(res => {
        this.$message.success("操作成功");
      });
    },
    handleEdit(row) {
      console.log(row);
      this.dialogVisible = true;
      this.text = "修改";
      this.ruleForm = row;
    },
    submit() {
      saveremind(this.ruleForm).then((res) => {
        this.$message.closeAll();
        this.$message.success("保存成功");
        this.getList();
        this.dialogVisible = false;
      });
    },
    handleDelete(row) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj({ id: row.id });
        })
        .then((data) => {
          this.$message.success("删除成功");
          this.getList();
        });
    },
    addBtn() {
      this.dialogVisible = true;
      this.text = "新增";
      this.ruleForm = {};
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>

<style>
</style>
